<template>
  <div class="tab-fifth">
    <el-row style="margin: 0 0 13px 0;font-size: 13px">
      <el-col :span="24" style="text-align: right">
        <a class="import " href="javascript:void(0)" @click="handleDialogOpen('import-customer-order')">导入客户订单</a>
        <a class="export " :href="`${baseUrl}/customer/formPage/downLoadOrder?logicId=${this.$route.params.id}&__token=${token}`">导出所有订单记录</a>
      </el-col>
    </el-row>

    <el-table :data="list" border v-loading="loading" style="width: 100%">
      <el-table-column prop="platfrom" label="下单平台"></el-table-column>
      <el-table-column prop="orderno" label="订单号"></el-table-column>
      <el-table-column prop="ordertime" label="下单时间"></el-table-column>
      <el-table-column label="商品名称/数量">
        <template slot-scope="scope">
          <span>{{scope.row.goodsname}} / {{scope.row.goodscount}} </span>
        </template>
      </el-table-column>
      <el-table-column prop="orderprice" label="订单总额"></el-table-column>
      <el-table-column prop="sn" label="商品SN码"></el-table-column>
      <el-table-column prop="receiver" label="收件人"></el-table-column>
      <el-table-column prop="connection" label="联系电话"></el-table-column>
    </el-table>
    <el-row>
      <el-col :md="{span: 24, offset: 0}" :lg="{span: 12, offset: 0}" style="line-height: 32px;padding: 13px 0">
        <p class="table-desc" v-show="lastImport.importTime">
          最近导入时间：{{lastImport.importTime}}    成功导入 {{lastImport.importCount}} 条数据， 重复 {{lastImport.repeatCount}} 条数据， 导入失败 {{lastImport.errorCount}} 条数据</p>
      </el-col>
      <el-col :md="{span: 24, offset: 0}" :lg="{span: 12, offset: 0}" class="pagination-text-right">
        <el-pagination layout="total,prev, pager, next" :current-page.sync="currentPage"
                       :total="page.total" :page-size="10" @current-change="handleCurrentChange"/>
      </el-col>
    </el-row>
    <v-dialog-content-import-customer-order
      ref="dialogImportCustomerOrder"
      :lastImport="lastImport"
      @axiosSuccess="handleImportSuccess"/>
  </div>
</template>
<script type="text/babel">
  import ImportCustomerOrder from '../components/dialog/ImportCustomerOrder.vue'
import env from '@/config/env'
import { queryOrderList } from '@/service/getData'

export default {
    data () {
      return {
        loading: false,
        list: [],
        lastImport: {
          importTime: '',
          importCount: 0,
          repeatCount: 0,
          errorCount: 0
        },
        page: {
          current: 1,
          pages: 1,
          size: 10,
          total: 0
        },
        currentPage: 1
      }
    },
    components: {
      'v-dialog-content-import-customer-order': ImportCustomerOrder
    },
    computed: {
      baseUrl () {
        return env.baseUrl2
      },
      token () {
        return localStorage.getItem('UBToken')
      }
    },
    methods: {
      axiosQueryOrderList (payload) {
        this.loading = true
        queryOrderList(payload)
          .then((res) => {
            if (res.data && 'code' in res.data && res.data.code === 1) {
              var resJson = res.data
              this.list = resJson.data.list
              this.page = resJson.data.page
              this.importTime = resJson.data.page.importTime
              this.importCount = resJson.data.page.importCount
            }
          })
          .finally(() => {
            this.loading = false
          })
      },
      handleImportSuccess () {
        // console.log('上传成功')
        this.currentPage !== 1 ? this.currentPage = 1 : this.handleCurrentChange()
      },
      handleCurrentChange () {
        this.axiosQueryOrderList({
          'logicId': this.$route.params.id,   // 微页面ID
          'page': this.currentPage, // 当前页
          'size': 10 // 分页条数
        })
      },
      handleDialogOpen (type, payload) {
        if (type === 'import-customer-order') {
          // 渠道设置开启
          this.$refs.dialogImportCustomerOrder.init()
        }
      }
    },
    mounted () {
    },
    activated () {
      this.currentPage !== 1 ? this.currentPage = 1 : this.handleCurrentChange()
    },
    watch: {
      $route () {
        this.activeTab = this.$route.name.replace(/minPage|formPage/, '')
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss">
  .tab-fifth {
    .table-desc {
      color: #5a5e66;
      font-size: 13px;
      line-height: 32px;
    }
  }


</style>
